Android开源库
28 分钟 读完 (大约 4194 个字)

《Android 开源库》 FlycoTabLayout 从头到脚

简介

FlycoTabLayout，是一个比Google原生TabLayout 功能更强大的TabLayout库。目前有3种TabLayout：

  • SlidingTabLayout

  • CommonTabLayout

  • SegmentTabLayout

    具体介绍和使用方法参考开源库的Wiki

    官方示例：
    这里写图片描述

源码分析

共有属性名称 格式 描述
tl_indicator_color color 设置显示器颜色
tl_indicator_height dimension 设置显示器高度
tl_indicator_margin_left dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_top dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_right dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_bottom dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_corner_radius dimension 设置显示器圆角弧度
tl_divider_color color 设置分割线颜色
tl_divider_width dimension 设置分割线宽度
tl_divider_padding dimension 设置分割线的paddingTop和paddingBottom
tl_tab_padding dimension 设置tab的paddingLeft和paddingRight
tl_tab_space_equal boolean 设置tab大小等分
tl_tab_width dimension 设置tab固定大小
tl_textsize dimension 设置字体大小
tl_textSelectColor color 设置字体选中颜色
tl_textUnselectColor color 设置字体未选中颜色
tl_textBold boolean 设置字体加粗
tl_textAllCaps boolean 设置字体全大写

1. SlidingTabLayout

1.1 特有属性

特有属性 格式 描述
tl_indicator_width dimension 设置显示器固定宽度
tl_indicator_gravity enum 设置显示器上方(TOP)还是下方(BOTTOM),只对常规显示器有用
tl_indicator_style enum 设置显示器为常规(NORMAL)或三角形(TRIANGLE)或背景色块(BLOCK)
tl_indicator_width_equal_title boolean 设置显示器与标题一样长(only for SlidingTabLayout)
tl_underline_color color 设置下划线颜色
tl_underline_height dimension 设置下划线高度
tl_underline_gravity enum 设置下划线上方(TOP)还是下方(BOTTOM)

1.2 类结构

1.2.1 构造方法

这里写图片描述
第一个调用第二个，第二个调用第三个，第三个获取自定义属性值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public SlidingTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    setFillViewport(true);//设置滚动视图是否可以伸缩其内容以填充视口
    setWillNotDraw(false);//重写onDraw方法,需要调用这个方法来清除flag
    setClipChildren(false);//不限制child在其范围内绘制
    setClipToPadding(false);//滚动时child可以绘制到padding区域

    this.mContext = context;
    mTabsContainer = new LinearLayout(context);//tab容器
    addView(mTabsContainer);//添加到HorizontalScrollView中

    obtainAttributes(context, attrs);//获取自定义属性，常用的方法，TypedArray记得回收

    //获取layout_height属性的值，这个方法比较溜，之前没见过
    String height = attrs.getAttributeValue("http://schemas.android.com/apk/res/android", "layout_height");

   //针对height做处理
   if (height.equals(ViewGroup.LayoutParams.MATCH_PARENT + "")) {
    } else if (height.equals(ViewGroup.LayoutParams.WRAP_CONTENT + "")) {
    } else {
        int[] systemAttrs = {android.R.attr.layout_height};
        TypedArray a = context.obtainStyledAttributes(attrs, systemAttrs);
        //获取高度
        mHeight = a.getDimensionPixelSize(0, ViewGroup.LayoutParams.WRAP_CONTENT);
        a.recycle();
    }
}
1.2.2 ViewPager

这里写图片描述
这里写图片描述

方法 描述
setViewPager(ViewPager vp) 设置ViewPager内容
public void setViewPager(ViewPager vp, String[] titles) 设置ViewPager内容和标签页的标题 
1
2
3
4
5
6
7
8
9
10
11
12
13
/** 关联ViewPager */
public void setViewPager(ViewPager vp) {
    if (vp == null || vp.getAdapter() == null) {
        throw new IllegalStateException("ViewPager or ViewPager adapter can not be NULL !");
    }
    /*本地赋值*/
    this.mViewPager = vp;
    /*重新绑定OnPageChangeListener*/
    this.mViewPager.removeOnPageChangeListener(this);
    this.mViewPager.addOnPageChangeListener(this);
    /*viewpager变化，tab页响应处理处理*/
    notifyDataSetChanged();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/** 更新数据 */
public void notifyDataSetChanged() {
    mTabsContainer.removeAllViews();//清空tab
    this.mTabCount = mTitles == null ? mViewPager.getAdapter().getCount() : mTitles.size();//获取tab数量，优先级mTitles > ViewPager的默认标题

    /*添加tab*/
    View tabView;
    for (int i = 0; i < mTabCount; i++) {
        tabView = View.inflate(mContext, R.layout.layout_tab, null);
        CharSequence pageTitle = mTitles == null ? mViewPager.getAdapter().getPageTitle(i) : mTitles.get(i);
        addTab(i, pageTitle.toString(), tabView);
    }
    //更新选中未选中状态更新tab
    updateTabStyles();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/** 创建并添加tab */
  private void addTab(final int position, String title, View tabView) {
      //设置标题
      TextView tv_tab_title = (TextView) tabView.findViewById(R.id.tv_tab_title);
      if (tv_tab_title != null) {
          if (title != null) tv_tab_title.setText(title);
      }
      //绑定点击事件，与ViewPager联动
      tabView.setOnClickListener(new OnClickListener() {
          @Override
          public void onClick(View v) {
              int position = mTabsContainer.indexOfChild(v);
              if (position != -1) {
                  if (mViewPager.getCurrentItem() != position) {
                      if (mSnapOnTabClick) {
                         // transition immediately
                         mViewPager.setCurrentItem(position, false);
                      } else {
                          //smoothly scroll to
                          mViewPager.setCurrentItem(position);
                      }

                      if (mListener != null) {
                          //自定义tab点击事件处理
                          mListener.onTabSelect(position);
                      }
                  } else {
                      if (mListener != null) {
                          //自定义Reselect事件处理
                          mListener.onTabReselect(position);
                      }
                  }
              }
          }
      });

      /** 每一个Tab的布局参数，mTabSpaceEqual 属性控制是否均分 */
      LinearLayout.LayoutParams lp_tab = mTabSpaceEqual ?
              new LinearLayout.LayoutParams(0,  
              LayoutParams.MATCH_PARENT, 1.0f) :
              new 
              LinearLayout.LayoutParams(
              LayoutParams.WRAP_CONTENT,    
              LayoutParams.MATCH_PARENT);
      if (mTabWidth > 0) {
          lp_tab = new LinearLayout.LayoutParams((int) mTabWidth, LayoutParams.MATCH_PARENT);
      }
      //添加到Tab容器
      mTabsContainer.addView(tabView, position, lp_tab);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
private void updateTabStyles() {
    //遍历设置标题选中颜色，未选中颜色，字体大小，大小写，粗体字
    for (int i = 0; i < mTabCount; i++) {
        View v = mTabsContainer.getChildAt(i);
        TextView tv_tab_title = (TextView) v.findViewById(R.id.tv_tab_title);
        if (tv_tab_title != null) {
            tv_tab_title.setTextColor(i == mCurrentTab ? mTextSelectColor : mTextUnselectColor);
            tv_tab_title.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextsize);
            tv_tab_title.setPadding((int) mTabPadding, 0, (int) mTabPadding, 0);
            if (mTextAllCaps) {
                tv_tab_title.setText(tv_tab_title.getText().toString().toUpperCase());
            }

            if (mTextBold == TEXT_BOLD_BOTH) {
                tv_tab_title.getPaint().setFakeBoldText(true);
            } else if (mTextBold == TEXT_BOLD_NONE) {
                tv_tab_title.getPaint().setFakeBoldText(false);
            }
        }
    }
}
方法 描述
setViewPager(ViewPager vp, String[] titles, FragmentActivity fa, ArrayList< Fragment > fragments) 设置ViewPager，标题内容，FragmentActivity和用于显示的Fragment,用来设置ViewPager的Adapter 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/** 关联ViewPager,用于连适配器都不想自己实例化的情况 */
public void setViewPager(ViewPager vp, String[] titles, FragmentActivity fa, ArrayList<Fragment> fragments) {
    if (vp == null) {
        throw new IllegalStateException("ViewPager can not be NULL !");
    }

    if (titles == null || titles.length == 0) {
        throw new IllegalStateException("Titles can not be EMPTY !");
    }

    this.mViewPager = vp;
    /*通过传入的参数构建FragmentPagerAdapter，设置到ViewPager*/
    this.mViewPager.setAdapter(new InnerPagerAdapter(fa.getSupportFragmentManager(), fragments, titles));

    this.mViewPager.removeOnPageChangeListener(this);
    this.mViewPager.addOnPageChangeListener(this);
    notifyDataSetChanged();
}

看下这个内部的InnerPagerAdapter,静态Fragment,不销毁重建，只更新数据内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class InnerPagerAdapter extends FragmentPagerAdapter {
    private ArrayList<Fragment> fragments = new ArrayList<>();
    private String[] titles;

    public InnerPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragments, String[] titles) {
        super(fm);
        this.fragments = fragments;
        this.titles = titles;
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // 覆写destroyItem并且空实现,这样每个Fragment中的视图就不会被销毁
        // super.destroyItem(container, position, object);
    }

    @Override
    public int getItemPosition(Object object) {
        return PagerAdapter.POSITION_NONE;
    }
}
方法 描述
onPageScrolled(int position, float positionOffset, int positionOffsetPixels) 页面滚动，position为当前位置，positionOffset范围[0,1),从当前到下一页，positionOffsetPixels从当前位置滚动的offset,单位px
onPageSelected(int position) 选中位置
onPageScrollStateChanged(int state) 滚动状态改变

SCROLL_STATE_IDLE(pager处于空闲状态)
SCROLL_STATE_DRAGGING( pager处于正在拖拽中)
SCROLL_STATE_SETTLING(pager正在自动沉降，相当于松手后，pager恢复到一个完整pager的过程)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    /**
     * position:当前View的位置
     * mCurrentPositionOffset:当前View的偏移量比例.[0,1)
     */
    this.mCurrentTab = position;
    this.mCurrentPositionOffset = positionOffset;
    /*标签栏根据ViewPager的滚动状态联动，滚动到对应位置*/
    scrollToCurrentTab();
    /*触发重绘*/
    invalidate();
}

@Override
public void onPageSelected(int position) {
    /*根据ViewPager选中状态调整标签页的选中状态*/
    updateTabSelection(position);
}

@Override
public void onPageScrollStateChanged(int state) {
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/** HorizontalScrollView滚到当前tab,并且居中显示 */
  private void scrollToCurrentTab() {
      if (mTabCount <= 0) {
          return;
      }

      int offset = (int) (mCurrentPositionOffset * mTabsContainer.getChildAt(mCurrentTab).getWidth());
      /**当前Tab的left+当前Tab的Width乘以positionOffset*/
      int newScrollX = mTabsContainer.getChildAt(mCurrentTab).getLeft() + offset;

      if (mCurrentTab > 0 || offset > 0) {
          /**HorizontalScrollView移动到当前tab,并居中*/
          newScrollX -= getWidth() / 2 - getPaddingLeft();
          calcIndicatorRect();
          newScrollX += ((mTabRect.right - mTabRect.left) / 2);
      }

      if (newScrollX != mLastScrollX) {
          mLastScrollX = newScrollX;
          /** scrollTo（int x,int y）:x,y代表的不是坐标点,而是偏移量
           *  x:表示离起始位置的x水平方向的偏移量
           *  y:表示离起始位置的y垂直方向的偏移量
           */
          scrollTo(newScrollX, 0);
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*根据是否选中设置字体颜色和粗体*/
private void updateTabSelection(int position) {
    for (int i = 0; i < mTabCount; ++i) {
        View tabView = mTabsContainer.getChildAt(i);
        final boolean isSelect = i == position;
        TextView tab_title = (TextView) tabView.findViewById(R.id.tv_tab_title);

        if (tab_title != null) {
            tab_title.setTextColor(isSelect ? mTextSelectColor : mTextUnselectColor);
            if (mTextBold == TEXT_BOLD_WHEN_SELECT) {
                tab_title.getPaint().setFakeBoldText(isSelect);
            }
        }
    }
}
1.2.3 Tab相关

这里写图片描述
这里写图片描述
这里写图片描述

方法 描述
addNewTab(String title) 提供给外部使用的新增tab的方法 
1
2
3
4
5
6
7
8
9
10
11
12
public void addNewTab(String title) {
    View tabView = View.inflate(mContext, R.layout.layout_tab, null);
    if (mTitles != null) {
        mTitles.add(title);
    }

    CharSequence pageTitle = mTitles == null ? mViewPager.getAdapter().getPageTitle(mTabCount) : mTitles.get(mTabCount);
    addTab(mTabCount, pageTitle.toString(), tabView);
    this.mTabCount = mTitles == null ? mViewPager.getAdapter().getCount() : mTitles.size();

    updateTabStyles();
}
方法 描述
setCurrentTab(int currentTab) 跳转到指定tab,是否平滑的滚动过去由系统控制
setCurrentTab(int currentTab, boolean smoothScroll) 跳转到制指定tab, smoothScroll控制是否平滑的滚动过去 
1
2
3
4
5
6
7
8
9
10
public void setCurrentTab(int currentTab) {
    this.mCurrentTab = currentTab;
    mViewPager.setCurrentItem(currentTab);

}

public void setCurrentTab(int currentTab, boolean smoothScroll) {
    this.mCurrentTab = currentTab;
    mViewPager.setCurrentItem(currentTab, smoothScroll);
}
1.2.4 Getter和Setter

不做赘述

1.2.5 MsgView相关（未读信息）

这里写图片描述

方法 描述
showMsg(int position, int num) 显示未读消息，position为tab位置，num小于等于0显示红点,num大于0显示数字
showDot(int position) 显示未读红点， position为tab位置
hideMsg(int position) 隐藏未读消息， position为tab位置
setMsgMargin(int position, float leftPadding, float bottomPadding) 设置未读消息偏移,原点为文字的右上角.当控件高度固定,消息提示位置易控制,显示效果佳
getMsgView(int position) 当前类只提供了少许设置未读消息属性的方法,可以通过该方法获取MsgView对象从而各种设置

2. CommonTabLayout

2.1 特有属性

特有属性 格式 描述
tl_indicator_width dimension 设置显示器固定宽度
tl_indicator_gravity enum 设置显示器上方(TOP)还是下方(BOTTOM),只对常规显示器有用
tl_indicator_style enum 设置显示器为常规(NORMAL)或三角形(TRIANGLE)或背景色块(BLOCK)
tl_indicator_anim_enable boolean 设置显示器支持动画(only for CommonTabLayout)
tl_indicator_anim_duration integer 设置显示器动画时间(only for CommonTabLayout)
tl_indicator_bounce_enable boolean 设置显示器支持动画回弹效果(only for CommonTabLayout)
tl_underline_color color 设置下划线颜色
tl_underline_height dimension 设置下划线高度
tl_underline_gravity enum 设置下划线上方(TOP)还是下方(BOTTOM)
tl_iconWidth dimension 设置icon宽度(仅支持CommonTabLayout)
tl_iconHeight dimension 设置icon高度(仅支持CommonTabLayout)
tl_iconVisible boolean 设置icon是否可见(仅支持CommonTabLayout)
tl_iconGravity enum 设置icon显示位置,对应Gravity中常量值,左上右下(仅支持CommonTabLayout)，LEFT，RIGHT，TOP，BOTTOM
tl_iconMargin dimension 设置icon与文字间距(仅支持CommonTabLayout)

2.2 区别于SlidingTabLayout

  • 不依赖于ViewPager，可以与其他组件搭配
  • 支持自定义Tab样式，主要体现在常用的图标+文字的形式。
  • SlidingTabLayout继承HorizontalScrollView而CommonTabLayout继承FrameLayout

2.3 类结构

2.3.1 构造方法

这里写图片描述
与SlidingTabLayout实现类似，获取的属性值不太一样而已。多出一个动画的内容，点击某一个Tab后，indicator的移动动画效果

1
2
mValueAnimator = ValueAnimator.ofObject(new PointEvaluator(), mLastP, mCurrentP);
mValueAnimator.addUpdateListener(this);
2.3.2 动画相关
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class IndicatorPoint {
    public float left;
    public float right;
}

private IndicatorPoint mCurrentP = new IndicatorPoint();
private IndicatorPoint mLastP = new IndicatorPoint();

class PointEvaluator implements TypeEvaluator<IndicatorPoint> {
    @Override
    public IndicatorPoint evaluate(float fraction, IndicatorPoint startValue, IndicatorPoint endValue) {
        float left = startValue.left + fraction * (endValue.left - startValue.left);
        float right = startValue.right + fraction * (endValue.right - startValue.right);
        IndicatorPoint point = new IndicatorPoint();
        point.left = left;
        point.right = right;
        return point;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Override
public void onAnimationUpdate(ValueAnimator animation) {
    View currentTabView = mTabsContainer.getChildAt(this.mCurrentTab);
    IndicatorPoint p = (IndicatorPoint) animation.getAnimatedValue();
    mIndicatorRect.left = (int) p.left;
    mIndicatorRect.right = (int) p.right;

    if (mIndicatorWidth < 0) {   //indicatorWidth小于0时,原jpardogo's PagerSlidingTabStrip

    } else {//indicatorWidth大于0时,圆角矩形以及三角形
        float indicatorLeft = p.left + (currentTabView.getWidth() - mIndicatorWidth) / 2;

        mIndicatorRect.left = (int) indicatorLeft;
        mIndicatorRect.right = (int) (mIndicatorRect.left + mIndicatorWidth);
    }
    invalidate();
}
2.3.3 Tab相关

这里写图片描述

方法 描述
setTabData(ArrayList< CustomTabEntity> tabEntitys) 设置tab entity
setTabData(ArrayList< CustomTabEntity> tabEntitys, FragmentActivity fa, int containerViewId, ArrayList< Fragment> fragments) 关联数据支持同时切换fragments
notifyDataSetChanged() 更新数据
setCurrentTab(int currentTab) 设置当前tab 
1
2
3
4
5
6
7
8
9
10
11
public void setTabData(ArrayList<CustomTabEntity> tabEntitys) {
    if (tabEntitys == null || tabEntitys.size() == 0) {
        throw new IllegalStateException("TabEntitys can not be NULL or EMPTY !");
    }

    this.mTabEntitys.clear();
    /*设置tab标签*/
    this.mTabEntitys.addAll(tabEntitys);
    /*更新数据*/
    notifyDataSetChanged();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/** 更新数据 */
public void notifyDataSetChanged() {
    /*清空容器中的tab*/
    mTabsContainer.removeAllViews();
    this.mTabCount = mTabEntitys.size();
    View tabView;
    /*根据图标的gravity构建不同的tab样式，图标支持上下左右*/
    for (int i = 0; i < mTabCount; i++) {
        if (mIconGravity == Gravity.LEFT) {
            tabView = View.inflate(mContext, R.layout.layout_tab_left, null);
        } else if (mIconGravity == Gravity.RIGHT) {
            tabView = View.inflate(mContext, R.layout.layout_tab_right, null);
        } else if (mIconGravity == Gravity.BOTTOM) {
            tabView = View.inflate(mContext, R.layout.layout_tab_bottom, null);
        } else {
            tabView = View.inflate(mContext, R.layout.layout_tab_top, null);
        }
        /*i添加到tag,但从这个类的方法上看，这一步没有什么必要，因为addTab会传入i,addTab中直接使用i就好，但是如果我们在外部拿到tabView,就可以直接指导它的position,不用循环遍历，还是挺方便的*/
        tabView.setTag(i);
        /*添加tab*/
        addTab(i, tabView);
    }
    /*根据选中未选中状态更新tab显示效果*/
    updateTabStyles();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/** 创建并添加tab */
private void addTab(final int position, View tabView) {
    /*设置文本内容，title*/
    TextView tv_tab_title = (TextView) tabView.findViewById(R.id.tv_tab_title);
    tv_tab_title.setText(mTabEntitys.get(position).getTabTitle());
    /*设置图标内容，添加未选中内容，后面根据选中未选中重新刷一次图片*/
    ImageView iv_tab_icon = (ImageView) tabView.findViewById(R.id.iv_tab_icon);
    iv_tab_icon.setImageResource(mTabEntitys.get(position).getTabUnselectedIcon());

    /*设置tabView的点击事件*/
    tabView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            /*前面设置的tab,也就是position*/
            int position = (Integer) v.getTag();
            if (mCurrentTab != position) {
                /*设置当前tab*/
                setCurrentTab(position);
                //有OnTabSelectListener则执行对应的处理
                if (mListener != null) {
                    mListener.onTabSelect(position);
                }
            } else {
                if (mListener != null) {
                    mListener.onTabReselect(position);
                }
            }
        }
    });

    /** 每一个Tab的布局参数 ，根据是否均分设置不同的布局，若宽度不为0，则设置宽度*/
    LinearLayout.LayoutParams lp_tab = mTabSpaceEqual ?
            new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f) :
            new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
    if (mTabWidth > 0) {
        lp_tab = new LinearLayout.LayoutParams((int) mTabWidth, LayoutParams.MATCH_PARENT);
    }
    mTabsContainer.addView(tabView, position, lp_tab);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*和SlidingTabLayout相似，多了一个图标的处理*/
private void updateTabStyles() {
    for (int i = 0; i < mTabCount; i++) {
        View tabView = mTabsContainer.getChildAt(i);
        tabView.setPadding((int) mTabPadding, 0, (int) mTabPadding, 0);
        TextView tv_tab_title = (TextView) tabView.findViewById(R.id.tv_tab_title);
        tv_tab_title.setTextColor(i == mCurrentTab ? mTextSelectColor : mTextUnselectColor);
        tv_tab_title.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextsize);
//            tv_tab_title.setPadding((int) mTabPadding, 0, (int) mTabPadding, 0);
        if (mTextAllCaps) {
            tv_tab_title.setText(tv_tab_title.getText().toString().toUpperCase());
        }

        if (mTextBold == TEXT_BOLD_BOTH) {
            tv_tab_title.getPaint().setFakeBoldText(true);
        } else if (mTextBold == TEXT_BOLD_NONE) {
            tv_tab_title.getPaint().setFakeBoldText(false);
        }

        ImageView iv_tab_icon = (ImageView) tabView.findViewById(R.id.iv_tab_icon);
        if (mIconVisible) {
            iv_tab_icon.setVisibility(View.VISIBLE);
            CustomTabEntity tabEntity = mTabEntitys.get(i);
            iv_tab_icon.setImageResource(i == mCurrentTab ? tabEntity.getTabSelectedIcon() : tabEntity.getTabUnselectedIcon());
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                    mIconWidth <= 0 ? LinearLayout.LayoutParams.WRAP_CONTENT : (int) mIconWidth,
                    mIconHeight <= 0 ? LinearLayout.LayoutParams.WRAP_CONTENT : (int) mIconHeight);
            if (mIconGravity == Gravity.LEFT) {
                lp.rightMargin = (int) mIconMargin;
            } else if (mIconGravity == Gravity.RIGHT) {
                lp.leftMargin = (int) mIconMargin;
            } else if (mIconGravity == Gravity.BOTTOM) {
                lp.topMargin = (int) mIconMargin;
            } else {
                lp.bottomMargin = (int) mIconMargin;
            }

            iv_tab_icon.setLayoutParams(lp);
        } else {
            iv_tab_icon.setVisibility(View.GONE);
        }
    }
}

另外一个setTabData

1
2
3
4
5
6
/** 关联数据支持同时切换fragments */
public void setTabData(ArrayList<CustomTabEntity> tabEntitys, FragmentActivity fa, int containerViewId, ArrayList<Fragment> fragments) {
    /*拿到一个mFragmentChangeManager ，后面setCurrentTab的时候 ，如果这个值不为空，根据这个来切换fragment,实现一种类似FragmentPagerAdapter的效果*/
    mFragmentChangeManager = new FragmentChangeManager(fa.getSupportFragmentManager(), containerViewId, fragments);
    setTabData(tabEntitys);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public void setCurrentTab(int currentTab) {
    mLastTab = this.mCurrentTab;
    this.mCurrentTab = currentTab;
    /*遍历更新tab选中未选中状态*/
    updateTabSelection(currentTab);
    /*如果mFragmentChangeManager 不为空，就根据当前选中的tab显示对应的Fragment*/
    if (mFragmentChangeManager != null) {
        mFragmentChangeManager.setFragments(currentTab);
    }
    /*indicator动画效果，计算后重绘*/
    if (mIndicatorAnimEnable) {
        calcOffset();
    } else {
        invalidate();
    }
}
2.3.4 FragmentChangeManager

这里写图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
public class FragmentChangeManager {
    private FragmentManager mFragmentManager;
    private int mContainerViewId;
    /** Fragment切换数组 */
    private ArrayList<Fragment> mFragments;
    /** 当前选中的Tab */
    private int mCurrentTab;

    /*构造方法，setTabData的时候看到过*/
    public FragmentChangeManager(FragmentManager fm, int containerViewId, ArrayList<Fragment> fragments) {
        this.mFragmentManager = fm;
        this.mContainerViewId = containerViewId;
        this.mFragments = fragments;
        initFragments();
    }

    /** 初始化fragments */
    private void initFragments() {
        for (Fragment fragment : mFragments) {
            mFragmentManager.beginTransaction().add(mContainerViewId, fragment).hide(fragment).commit();
        }

        setFragments(0);
    }

    /** 界面切换控制,CommonTabLayout中的setCurrentTab方法可以控制*/
    public void setFragments(int index) {
        for (int i = 0; i < mFragments.size(); i++) {
            FragmentTransaction ft = mFragmentManager.beginTransaction();
            Fragment fragment = mFragments.get(i);
            if (i == index) {
                ft.show(fragment);
            } else {
                ft.hide(fragment);
            }
            ft.commit();
        }
        mCurrentTab = index;
    }

    public int getCurrentTab() {
        return mCurrentTab;
    }

    public Fragment getCurrentFragment() {
        return mFragments.get(mCurrentTab);
    }
}
2.3.5 Getter,Setter以及MsgView先关

Getter和Setter方法是属性值的获取和设置，MsgView相关方法和SlidingTabLayout比较相似。

3. SegmentTabLayout

3.1 特有属性

特有属性 格式 描述
tl_indicator_anim_enable boolean 设置显示器支持动画
tl_indicator_anim_duration integer 设置显示器动画时间
tl_indicator_bounce_enable boolean 设置显示器支持动画回弹效果
tl_bar_color color 设置整体颜色
tl_bar_stroke_color color 设置边框颜色
tl_bar_stroke_width dimension 设置边框粗细

3.2 区别于CommonTabLayout

  • 不支持图标，但是可以看做是一个特殊的CommonTabLayout.

3.3 类结构

整体来说，内容基本上和CommonTabLayout，只是少了Icon的对应处理，多出的是Segment样式的处理。

4. MsgView

4.1 自定义属性

属性值 格式 描述
mv_backgroundColor color 圆角矩形背景色
mv_cornerRadius dimension 圆角弧度,单位dp
mv_strokeWidth dimension 边框粗细，单位dp
mv_strokeColor color 圆角边框颜色
mv_isRadiusHalfHeight boolean 圆角弧度是高度一半
mv_isWidthHeightEqual boolean 圆角矩形宽高相等,取较宽高中大值

4.2 类结构

这里写图片描述

项目使用

个人项目Gank.io Android 客户端中使用效果,底部使用的CommonTabLayout，顶部使用的是SlidingTabLayout。整体而言，日常开发过程中，FlycoTabLayout还是很实用的。

这里写图片描述

这里写图片描述

# 开源库

喜欢这篇文章？打赏一下作者吧

《Android 开源库》PhotoPicker 从头到脚
《Android 应用 之路》 干货集中营～技术船
关注我

链接

分类

标签云

Aandroid实战 Android Studio Android基础 Android实战 Android开源库 Android源码 Angular CentOS Docker Drawable FileProvider Flutter Fragment Framework Gank.io Gitlab HAL IDEA插件 Kotlin LeetCode Linux MPAndroidChart MacOS Markdown MultiDex Mysql NDK PMDReader Picasso PowerDesign Realm RecyclerView Retrofit RxJava Smali Tomcat WanANdroid WebService Xen allowBackup ionic 动画 四大组件 多线程 局域网 工具 布局控件 应用 开发问题 开机动画 开源 开源库 微信公众号 微信小程序 百度地图 系统源码 自定义View 虚拟化 设计模式 译文 资源 辅助工具 配置

最新文章

归档

标签

Aandroid实战 1
Android Studio 6
Android基础 1
Android实战 27
Android开源库 3
Android源码 1
Angular 1
CentOS 3
Docker 4
Drawable 1
FileProvider 1
Flutter 1
Fragment 4
Framework 9
Gank.io 3
Gitlab 1
HAL 1
IDEA插件 1
Kotlin 6
LeetCode 5
Linux 6
MPAndroidChart 5
MacOS 1
Markdown 1
MultiDex 1
Mysql 2
NDK 1
PMDReader 1
Picasso 1
PowerDesign 1
Realm 8
RecyclerView 1
Retrofit 1
RxJava 3
Smali 2
Tomcat 1
WanANdroid 1
WebService 1
Xen 3
allowBackup 1
ionic 1
动画 3
四大组件 2
多线程 1
局域网 1
工具 1
布局控件 33
应用 7
开发问题 1
开机动画 2
开源 1
开源库 13
微信公众号 1
微信小程序 2
百度地图 4
系统源码 1
自定义View 8
虚拟化 3
设计模式 2
译文 20
资源 1
辅助工具 1
配置 1

最新文章

归档

标签

Aandroid实战 1
Android Studio 6
Android基础 1
Android实战 27
Android开源库 3
Android源码 1
Angular 1
CentOS 3
Docker 4
Drawable 1
FileProvider 1
Flutter 1
Fragment 4
Framework 9
Gank.io 3
Gitlab 1
HAL 1
IDEA插件 1
Kotlin 6
LeetCode 5
Linux 6
MPAndroidChart 5
MacOS 1
Markdown 1
MultiDex 1
Mysql 2
NDK 1
PMDReader 1
Picasso 1
PowerDesign 1
Realm 8
RecyclerView 1
Retrofit 1
RxJava 3
Smali 2
Tomcat 1
WanANdroid 1
WebService 1
Xen 3
allowBackup 1
ionic 1
动画 3
四大组件 2
多线程 1
局域网 1
工具 1
布局控件 33
应用 7
开发问题 1
开机动画 2
开源 1
开源库 13
微信公众号 1
微信小程序 2
百度地图 4
系统源码 1
自定义View 8
虚拟化 3
设计模式 2
译文 20
资源 1
辅助工具 1
配置 1
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×